<template>
  <div class="navheader">
    <template v-if="isShowAside">
      <el-icon
        class="icon"
        size="20"
        style="cursor: pointer"
        @click="handleAsideClick"
        ><expand
      /></el-icon>
    </template>
    <template v-else>
      <el-icon
        class="icon"
        size="20"
        style="cursor: pointer"
        @click="handleAsideClick"
        ><fold
      /></el-icon>
    </template>
    <div class="content">
      <!-- 面包屑 -->
      <fh-bread-crumb :breadcrumbs="breadcrumbs" />
      <user-info></user-info>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import userInfo from './user-info.vue'
import FhBreadCrumb from '@/base-ui/breadcrumb'
import { useRoute } from 'vue-router'
import { useStore } from '@/store'
import { pathToBreadCrumbs } from '@/utils/MenusToRoutes'

export default defineComponent({
  components: { userInfo, FhBreadCrumb },
  emits: ['asidechange'],
  setup(props, { emit }) {
    const isShowAside = ref(false)
    const handleAsideClick = () => {
      isShowAside.value = !isShowAside.value
      emit('asidechange', isShowAside.value)
    }

    // 面包屑 {[],[],[]}
    const store = useStore()
    const route = useRoute()
    // 加上computed()实现响应式.
    // breadcrumbs类型为IBreadCrumb[],加上computed()返回ComputedRef,让其自动推导
    const breadcrumbs = computed(() => {
      const currentpath = route.path
      const usermenus = store.state.login.userMenus
      return pathToBreadCrumbs(usermenus, currentpath)
    })

    return {
      isShowAside,
      handleAsideClick,
      breadcrumbs
    }
  }
})
</script>

<style scoped lang="less">
.navheader {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0 10px;
  }
}
</style>
